<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--      评论列表-->
    <div>
        <div v-for="item in comments" :key="item.id" style="border-bottom: 1px solid #ccc; padding: 10px 0; ">
            <div style="display: flex">
                <div style="width: 100px; text-align: center">
                    <el-image :src="item.avatarUrl" style="width: 50px; height: 50px; border-radius: 50%"></el-image>
                </div> <!--  头像-->
                <div style="flex: 1; font-size: 14px; padding: 5px 0; line-height: 25px">
                    <b>{{ item.nickname }}：</b>
                    <span>{{ item.content }}</span>

                    <div style="display: flex; line-height: 20px; margin-top: 5px">
                        <div style="width: 200px;">
                            <i class="el-icon-time"></i><span style="margin-left: 5px">{{ item.time }}</span>
                        </div>
                        <div style="text-align: right; flex: 1">
                            <el-button style="margin-left: 5px" type="text" @click="handleReply(item.id)">回复</el-button>
                            <el-button type="text" style="color: red" @click="del(item.id)"
                                v-if="user.id === item.userId">
                                删除</el-button>
                        </div>
                    </div>
                </div> <!--  内容-->
            </div>

            <div v-if="item.children.length" style="padding-left: 200px;">
                <div v-for="subItem in item.children" :key="subItem.id"
                    style="background-color: #f0f0f0; padding: 5px 20px">
                    <!--          回复列表-->
                    <div style="font-size: 14px; padding: 5px 0; line-height: 25px">
                        <div>
                            <b style="color: #3a8ee6" v-if="subItem.pnickname">@{{ subItem.pnickname }}</b>
                        </div>
                        <div style="padding-left: 5px">
                            <b>{{ subItem.nickname }}：</b>
                            <span>{{ subItem.content }}</span>
                        </div>

                        <div style="display: flex; line-height: 20px; margin-top: 5px; padding-left: 5px">
                            <div style="width: 200px;">
                                <i class="el-icon-time"></i><span style="margin-left: 5px">{{ subItem.time }}</span>
                            </div>
                            <div style="text-align: right; flex: 1">
                                <el-button style="margin-left: 5px" type="text" @click="handleReply(subItem.id)">回复
                                </el-button>
                                <el-button type="text" style="color: red" @click="del(subItem.id)"
                                    v-if="user.id === subItem.userId">删除</el-button>
                            </div>
                        </div>
                    </div> <!--  内容-->
                </div>
            </div>


        </div>
    </div>
</head>

<body>

</body>

</html>